import React, { useReducer } from 'react'

const reducer = (state, { type, payload }) => {
  switch (type) {
    case "INCREMENT":
      return Object.assign({}, state, { count: state.count + payload })
    case "DECREMENT":
      return {...state, count: state.count - payload }
    default:
      break;
  }
}
function Second () {
  const [ state, dispatch ] = useReducer(reducer, { count: 10 })
  return (
    <div>
      <button onClick={ () => {
        dispatch({
          type: 'INCREMENT',
          payload: 5
        })
      }}>+</button>
      {state.count}
      <button onClick={ () => {
        dispatch({
          type: 'DECREMENT',
          payload: 5
        })
      }}>-</button>
    </div>
  )
}
function Third () {
  const [ state, dispatch ] = useReducer(reducer, { count: 100 })
  return (
    <div>
      <button onClick={ () => {
        dispatch({
          type: 'INCREMENT',
          payload: 5
        })
      }}>+</button>
      {state.count}
      <button onClick={ () => {
        dispatch({
          type: 'DECREMENT',
          payload: 5
        })
      }}>-</button>
    </div>
  )
}
function App() {
  return (
    <>
      <Second></Second>
      <hr/>
      <Third></Third>
    </>
  )
}

export default App
